<template>
	<view class="">
		<view class="my-list pl-0 pr-0">
			<u-list :height="swiperHeight" v-if="dataList.length > 0">
				<view class="sety-num border-t" v-for="(item, index) in dataList" :key="item.id" @click="onRadio(index)">
					<view class="flex align-center">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="item.disabled?'icon-checkbox-circular-fill':'icon-checkbox-circular'" 
							size="30" 
							:color="item.disabled?'#e54d42':'#999'"
						/>
						<image class="img" :src="item.imageUrl || '../../static/logo.png'" />
						<view class="tbx">
							<text>{{item.name}}</text>
							<view class="flex justify-between align-center">
								<view class="">
									<text class="fsize-22 line-red">￥</text>
									<text class="fsize-32 line-red">{{item.price}}</text>
									<text class="ml-10 fsize-24"> · {{item.nums}}次 · 剩余{{item.balance}}次</text>
								</view>
							</view>
						</view>
					</view>
					<view 
						class="flex justify-between align-center pl-200 pt-20" 
						v-if="item.disabled"
						@click.stop="$u.route('/pages/selectPage/staff',{index: index, type: '1'})"
					>
						<view class="fsize-28">
							<text v-if="item.staffName">{{item.staffName}}</text>
							<text v-else class="line-gray">请选择服务人员</text>
						</view>
						<u-icon name="arrow-right" color="#aaa" size="16" />
					</view>
				</view>
				<!-- <u-loadmore :status="loadmore.status" :icon-type="loadmore.iconType"
					:load-text="loadmore.loadText.loadText" margin-top="10" margin-bottom="10"/> -->
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length == 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
		<!-- <u-gap height="80"></u-gap> -->
		<view class="bottom-button">
			<u-button type="primary" size="large" color="#e54d42" text="确认划卡" @click="onNavigateBack"></u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				dataList: [],
				selectedList:[],
				userId: null,
			}
		},
		onLoad(options) {
			this.getPageList(options.id)
			this.userId = Number(options.userId)
			uni.$on('select-staff', obj => {
				this.dataList[obj.index].staffId = obj.id
				this.dataList[obj.index].staffName = obj.nickName
			})
		},
		onUnload() {
			// 移除监听事件
			uni.$off('select-staff')
		},
		methods: {
			onNavigateBack(){
				this.selectedList = this.dataList.filter(im=>im.disabled).map(jm=>{
					return {id: jm.id,staffId:jm.staffId}
				})
				if(this.selectedList.length === 0){
					this.$refs.uToast.show({ message:'请选择划卡项目!'})
				}else if(this.selectedList.findIndex(v=>uni.$u.test.isEmpty(v.staffId))!== -1){
					this.$refs.uToast.show({ message:'请选择服务人员!'})
				}else {
					this.$reqJsonPost('UserCardsConsume', {
						items: this.selectedList,
						userId: this.userId
					}).then(res=>{
						this.$refs.uToast.show({ 
							message: res.msg,
							complete(){
								uni.$emit('uplist', 0)
								uni.navigateBack()
							}
						})
					})
				}
			},
			onRadio(ix){
				this.dataList[ix].disabled = !this.dataList[ix].disabled
			},
			getPageList(id) {
				let that = this
				this.$reqJsonPost('UserCardsDetails', {id:id}).then(res => {
					let rda = res.data.data.items.map(im=>{
						im.disabled = false
						im.staffName = ''
						return im
					})
					this.dataList = rda
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sety-num{
		padding: 10px;
		background-color: #fff;
		.img{
			width: 50px;
			height: 50px;
			border-radius: 5px;
			flex-shrink: 0;
			margin-left: 10px;
			margin-right: 10px;
		}
		.tbx{
			width: 100%;
			display:flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>
